<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>智能简历解析系统</title>
    <style>
        /* 打印按钮样式 */
        #print-button {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #print-button:hover {
            background-color: #0056b3;
        }

        #crawler-container {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
        }

        #url-input {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #fetch-button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #fetch-button:hover {
            background-color: #218838;
        }

       .crawler-box {
            padding: 20px;
            background: #f5f5f5;
            margin-bottom: 30px;
        }

       .crawled-mode {
            border-left: 5px solid #4CAF50;
            padding-left: 15px;
        }

       .resume-section {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <!-- 打印按钮 -->
    <button id="print-button" onclick="window.print()">打印简历</button>
    <!-- 爬虫功能输入框 -->
    <div class="crawler-box">
        <h2>简历爬取工具</h2>
        <form id="crawlForm">
            <input type="url" name="url" placeholder="输入简历网址" required style="width: 300px; padding: 8px;">
            <button type="submit" style="padding: 8px 15px;">爬取简历</button>
            {% if is_crawled %}
            <button type="button" onclick="resetResume()" style="padding: 8px 15px; margin-left: 10px;">显示我的简历</button>
            {% endif %}
        </form>
        <p id="message" style="color: red;"></p>
    </div>

    <!-- 简历展示区 -->
    <div class="resume-container">
        <header class="header">
            <div class="header-left">
                <img src="{{ resume.basic_info.photo if resume.basic_info.photo else 'templates/profile.jpg' }}" alt="头像" class="avatar">
                <h1 class="name">{{ resume.basic_info.name if resume.basic_info.name else '符嘉月' }}</h1>
                <p class="job-intention">求职意向: {{ resume.basic_info.job_intention if resume.basic_info.job_intention else 'Web前端岗位' }}</p>
            </div>
            <div class="header-right">
                <p class="age">年龄: 20岁</p>
                <p class="phone">电话: {{ resume.basic_info.contact.phone if resume.basic_info.contact.phone else '13976831049' }}</p>
                <p class="address">现居: 海南昌江</p>
                <p class="email">邮箱: {{ resume.basic_info.contact.email if resume.basic_info.contact.email else '3036889416@qq.com' }}</p>
            </div>
        </header>
        <section class="education-background">
            <h2 class="section-title">★教育背景</h2>
            {% for education in resume.education %}
            <div class="education-item">
                <span class="date">{{ education.period }}</span>
                <span class="school">{{ education.school }}</span>
                <span class="major">软件技术专业</span>
                <span class="degree">学士学位</span>
            </div>
            {% endfor %}
        </section>

        <section class="practice-experience">
            <h2 class="section-title">♟实践经历</h2>
            {% for project in resume.projects %}
            <div class="experience-item">
                <span class="date">{{ project.period }}</span>
                <span class="company">{{ project.name }}</span>
                <span class="position">数据标注</span>
                <ul class="experience-details">
                    <li>技能和工具: {{ project.tech_stack }};</li>
                    <li>项目描述: {{ project.description }}</li>
                    <li>个人职责: {{ project.responsibility }}</li>
                </ul>
            </div>
            {% endfor %}
        </section>

        <section class="skills-certificates">
            <h2 class="section-title">✍技能&证书</h2>
            <ul class="skills-list">
                {% for skill in resume.skills %}
                <li>{{ skill }}</li>
                {% endfor %}
            </ul>
        </section>

        <section class="self-evaluation">
            <h2 class="section-title">✎自我评价</h2>
            <ul class="evaluation-list">
                <li>{{ resume.self_evaluation }}</li>
            </ul>
        </section>
    </div>

    <script>
        // AJAX提交爬取请求
        document.getElementById('crawlForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const messageEl = document.getElementById('message');
            messageEl.textContent = '正在爬取...';

            try {
                const formData = new FormData(e.target);
                const response = await fetch('/crawl', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                if (result.success) {
                    window.location.href = result.redirect;  // 跳转回首页
                } else {
                    messageEl.textContent = '爬取失败: ' + (result.error || '未知错误');
                }
            } catch (error) {
                messageEl.textContent = '请求失败: ' + error.message;
                console.error('Error:', error);
            }
        });

        // 重置显示我的简历
        function resetResume() {
            fetch('/reset', { method: 'POST' })
               .then(() => window.location.href = '/')
               .catch(err => console.error(err));
        }
    </script>
</body>

</html>